<template>
  <div ref="cardRef" class="tui-card"
    :class="[`tui-card--shadow-${shadow}`, { 'tui-card--feature': props.featureTag, 'tui-card--fixed': isFixed, 'tui-card--left-border': props.leftBorderColor }]"
    :style="[{ position: isFixed ? 'fixed' : 'relative' }, props.leftBorderColor ? { '--tui-card-left-border-color': props.leftBorderColor } : {}]">
    <div v-if="header || $slots.header" class="tui-card__header">
      <slot name="header">
        {{ header }}
      </slot>
    </div>
    <div class="tui-card__content">
      <slot></slot>
    </div>

    <!-- 特性标签 -->
    <div v-if="props.featureTag" class="tui-card__feature-tag">
      {{ props.featureTag }}
    </div>
    <div v-if="footer || $slots.footer" class="tui-card__footer">
      <div class="tui-card__footer-content">
        <slot name="footer">
          {{ footer }}
        </slot>
      </div>
    </div>
    <div class="tui-card__code"
      :class="{ 'tui-card__code--visible': showCode && props.codes && props.codes.length > 0 }">
      <!-- 使用tui-code组件渲染每个代码块 -->
      <tui-code v-for="(code, index) in props.codes" :key="index" :code="code" :inline="false" />
    </div>
    <!-- 固定定位按钮，相对于卡片绝对定位 -->
    <div v-if="props.sticky" class="tui-card__fix-panel">
      <tui-button @click="toggleFix" class="tui-card__fix-btn">
        <tui-icon icon="tui:sticky"
          :color="isFixed ? 'var(--tui-color-primary)' : 'var(--tui-color-text-secondary)'"></tui-icon>
      </tui-button>

      <!-- 移动图标，仅在卡片固定时显示 -->
      <div v-if="isFixed" class="tui-card__move-handle" @mousedown="startDrag"
        :style="{ cursor: isDragging ? 'grabbing' : 'grab' }">
        <tui-icon icon="tui:drag" color="var(--tui-color-primary)"></tui-icon>
      </div>
    </div>

    <!-- 代码按钮，根据展开/折叠状态动态切换位置和图标 -->
    <div v-if="props.codes && props.codes.length > 0"
      :class="showCode ? 'tui-card__code-panel-expanded' : 'tui-card__code-panel-collapsed'">
      <button @click="toggleCode" class="tui-card__code-btn">
        <tui-icon :icon="showCode ? 'tui:arrow-up' : 'tui:code'"></tui-icon>
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, onUnmounted } from 'vue';

import type { TuiCardProps } from './types';

// 使用withDefaults设置默认值
const props = withDefaults(defineProps<TuiCardProps>(), {
  shadow: 'always',
  sticky: false,
  codes: () => [],
  featureTag: false,
  leftBorderColor: false
});

// 控制代码区域的显示与隐藏
const showCode = ref(false);

// 控制卡片是否固定定位
const isFixed = ref(false);
const originalPosition = ref({ top: 0, left: 0 });
const cardRef = ref<HTMLElement | null>(null);

// 拖动相关状态
const isDragging = ref(false);
const dragStart = ref({ x: 0, y: 0 });

// 代码高亮处理
const highlightCode = () => {
  // 代码高亮现在由tui-code组件内部处理
  // 这里保留函数以维持原有逻辑结构
};

// 描述内容（用于演示）
const description = ref(''); // 这行可能不需要，但保留以维持原有结构

// 切换代码区域的显示与隐藏
const toggleCode = () => {
  showCode.value = !showCode.value;
};

// 切换卡片是否固定定位
const toggleFix = () => {
  if (cardRef.value) {
    if (!isFixed.value) {
      // 记录原始位置和宽度并立即设置为固定位置
      const rect = cardRef.value.getBoundingClientRect();
      originalPosition.value = {
        top: rect.top + window.scrollY,
        left: rect.left + window.scrollX
      };
      // 当从relative变为fixed时，需要设置top、left和width来保持视觉位置和尺寸
      cardRef.value.style.top = `${rect.top}px`;
      cardRef.value.style.left = `${rect.left}px`;
      cardRef.value.style.width = `${rect.width}px`;
    } else {
      // 取消固定时，清除所有设置的样式，让卡片回到文档流中的原始位置
      cardRef.value.style.top = '';
      cardRef.value.style.left = '';
      cardRef.value.style.width = '';
    }
    isFixed.value = !isFixed.value;
  }
};

// 开始拖动
const startDrag = (e: MouseEvent) => {
  if (isFixed.value && cardRef.value) {
    isDragging.value = true;
    dragStart.value = {
      x: e.clientX - cardRef.value.getBoundingClientRect().left,
      y: e.clientY - cardRef.value.getBoundingClientRect().top
    };

    const handleMouseMove = (moveEvent: MouseEvent) => {
      if (isDragging.value && cardRef.value) {
        cardRef.value.style.left = `${moveEvent.clientX - dragStart.value.x}px`;
        cardRef.value.style.top = `${moveEvent.clientY - dragStart.value.y}px`;
      }
    };

    const handleMouseUp = () => {
      isDragging.value = false;
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  }
};

// 监听显示状态变化
watch(showCode, (newValue) => {
  if (newValue) {
    highlightCode();
  }
});

// 监听codes数组变化
watch(() => props.codes, () => {
  if (showCode.value) {
    highlightCode();
  }
}, { deep: true });

// 组件挂载时的处理
onMounted(() => {
  highlightCode();
});

// 组件卸载时的处理
onUnmounted(() => {
  // 清理拖动相关的事件监听
  document.removeEventListener('mousemove', () => { });
  document.removeEventListener('mouseup', () => { });
});
</script>

<style scoped lang="scss">
.tui-card {
  padding: 0;
  margin: 10px 0;
  border-radius: 8px;
  background-color: var(--tui-color-white);
  position: relative;
  transition: border-color var(--tui-transition-duration) ease;

  &--shadow-always {
    box-shadow: var(--tui-box-shadow);
  }

  &--shadow-hover {
    box-shadow: none;
    transition: box-shadow var(--tui-transition-duration) ease;

    &:hover {
      box-shadow: var(--tui-box-shadow-dark);
    }
  }

  &--shadow-none {
    box-shadow: none;
    border: 1px solid var(--tui-color-border);
  }

  // 头部样式
  &__header {
    padding: var(--tui-spacing);
    font-size: 16px;
    font-weight: 500;
    color: var(--tui-color-text-primary);
    border-bottom: 1px solid var(--tui-color-border-light);
  }

  // 内容样式
  &__content {
    padding: var(--tui-spacing);
    color: var(--tui-color-text-primary);
  }

  // 底部样式
  &__footer {
    padding: var(--tui-spacing);
    border-top: 1px solid var(--tui-color-border-light);
  }

  &__footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // 代码区域样式
  &__code {
    padding: 2px; // 防止代码块底部遮挡card边框
    // border-top: 1px solid var(--tui-color-border-light);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--tui-transition-duration) ease, opacity var(--tui-transition-duration) ease var(--tui-transition-delay);

    &--visible {
      max-height: 3000px; // 一个足够大的值以容纳所有代码
      opacity: 1;
    }
  }

  // tui-code组件将提供自己的样式
  // 这里保留基本的间距

  // 固定定位面板样式
  &__fix-panel {
    position: absolute;
    top: var(--tui-spacing-medium);
    right: var(--tui-spacing-medium);
    display: flex;
    flex-direction: column;
    gap: var(--tui-spacing-small);
  }

  // 固定按钮样式
  &__fix-btn {
    background: var(--tui-bg-color);
    border: var(--tui-border);
    border-radius: var(--tui-border-radius-base);
    padding: var(--tui-spacing-small);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--tui-box-shadow-lighter);

    &:hover,
    &:focus {
      border-color: var(--tui-color-primary);
      box-shadow: var(--tui-box-shadow-light);
    }
  }

  // 移动手柄样式
  &__move-handle {
    background: var(--tui-bg-color);
    border: var(--tui-border);
    border-radius: var(--tui-border-radius-base);
    padding: var(--tui-spacing-small);
    cursor: grab;
    transition: var(--tui-transition-all);
    box-shadow: var(--tui-box-shadow-lighter);

    &:active {
      cursor: grabbing;
    }
  }

  // 代码按钮面板样式 - 始终定位在卡片右下角
  &__code-panel-expanded,
  &__code-panel-collapsed {
    position: absolute;
    bottom: 0;
    right: 0;
    transition: var(--tui-transition-all);
  }

  &__code-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tui-text-color-secondary);
    padding: var(--tui-spacing-small);
    border-radius: var(--tui-border-radius-base);
    transition: background-color var(--tui-transition-duration) ease;
    outline: none;

    &:hover,
    &:focus {
      background-color: var(--tui-bg-color-light);
    }
  }

  // 特性标签样式
  &--feature {
    border: 2px solid var(--tui-color-primary);
    margin-bottom: 20px;
  }

  // 左侧色条样式
  &--left-border {
    border-left: 4px solid var(--tui-card-left-border-color);
  }

  // 固定定位卡片样式
  &--fixed {
    z-index: 1;
  }

  &__feature-tag {
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: var(--tui-color-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}
</style>
